<template>
  <div class="container" :style="{ height: height }">
    <div class="title_container">
      <span class="title"></span>
      <span style="margin-left: 10px; font-size: 20px; color: #1cdbfe">
        能力评估情况</span
      >
    </div>
    <div>
      <el-row>
        <el-col :span="12">
          <div
            class="pie-chart"
            ref="pieChart"
            style="width: 100%; height: 260px"
          ></div>
        </el-col>
        <el-col :span="12">
          <div
            ref="barChart"
            class="bar-chart"
            style="width: 100%; height: 260px"
          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getAbilityEval } from "@/api/dataScreen/index";
export default {
  data() {
    return {
      total: 0,
      height: "300px",
      color: ["#E4C431", "#E54C32", "#FB9A44", "#4FA6F7"],

      maleData: [
        { name: "中度失能", value: 24 },
        { name: "重度失能", value: 15 },
        { name: "轻度失能", value: 33 },
      ],
      femaleData: [
        { name: "中度失能", value: 46 },
        { name: "重度失能", value: 25 },
        { name: "轻度失能", value: 55 },
      ],
    };
  },
  methods: {
    // 根据数值大小返回气泡的大小

    renderChart() {
      getAbilityEval().then((res) => {
        this.total = res.result.abilityEvalInfo.totalPersonNum;
        const chart = echarts.init(this.$refs.pieChart);
        const chart1 = echarts.init(this.$refs.barChart);

        const name = res.result.sexAbilityEvalInfo.map(
          (item) => item.disabilityLevel,
        )
        const arr = []
        for (const i in res.result.abilityEvalInfo.disabilityLevelList) {
          const obj = {
            name: res.result.abilityEvalInfo.disabilityLevelList[i]
              .disabilityLevel,
            value: res.result.abilityEvalInfo.disabilityLevelList[i].personNum,
            label: {
              color: this.color[i],
            },
          }
          arr.push(obj)
        }

        const option = {
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0.6,
                color: "rgba(21, 25, 82,0.6)",
              },

              {
                offset: 0,
                color: "rgba(228, 196, 49, 0.8)",
              },
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 0.7,
                color: "rgba(21, 25, 82,0.6)",
              },
              {
                offset: 0,
                color: "rgba(251, 154, 68, 0.8)",
              },
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              {
                offset: 0.4,
                color: "rgba(21, 25, 82,0.6)",
              },
              {
                offset: 0.8,
                color: "rgba(229, 76, 50,0.8)",
              },
            ]),
          ],
          title: {
            text: `${this.total}人`,
            textStyle: {
              fontSize: 20,
              color: "#ffffff",
            },
            subtext: `合计`,
            subtextStyle: {
              fontSize: 18,
              color: "#4FA6F7",
            },
            top: "40%",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            backgroundColor: "#040737",
            borderColor: "#0E8BFF", // 设置边框颜色，这里是绿色
            borderWidth: 2, // 设置边框宽度，这里是2像素
            textStyle: {
              // 设置文本样式
              color: "#ffffff", // 设置文本颜色
              fontSize: 16, // 设置文本字体大小
            },
            axisPointer: {
              // 禁用轴线
              type: "none",
            },
          },
          series: [
            {
              name: "失能分布",
              type: "pie",
              radius: ["45%", "60%"],
              avoidLabelOverlap: false,
              hoverAnimation: true,
              label: {
                show: true,
                position: "outside",
                fontSize: 14,
                // color: 'auto',
                formatter: function (params) {
                  return `{a|${params.name}}\n{b|${params.value}人}`;
                },
                rich: {
                  a: {
                    fontSize: 14,
                    lineHeight: 20,
                    align: "center",
                  },
                  b: {
                    fontSize: 14,
                    lineHeight: 20,
                    align: "center",
                  },
                },
              },
              labelLine: {
                show: true,
                length: 30, // 调整标签线的长度
              },
              // color: this.color,
              itemStyle: {
                borderRadius: 10,
              },
              data: arr,
            },
          ],
        };

        chart.setOption(option);
        const arr1 = []
        for (const i in res.result.sexAbilityEvalInfo) {
          const obj = {
            name: res.result.sexAbilityEvalInfo[i].disabilityLevel,
            type: 'bar',
            stack: '失能程度',
            label: {
              show: true,
              position: 'inside',
              color: '#ffffff',
              formatter: '{c}人',
            },
            barWidth: 20, // 柱子高度
            itemStyle: {
              borderRadius: [10, 10, 10, 10], // 圆角
            },
            data: [
              res.result.sexAbilityEvalInfo[i].maleNum,
              res.result.sexAbilityEvalInfo[i].femaleNum,
            ],
          }
          arr1.push(obj)
        }

        const option1 = {
          color: [
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 1,
                color: "rgba(21, 25, 82,0.6)",
              },

              {
                offset: 0,
                color: "rgba(228, 196, 49, 0.8)",
              },
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 1,
                color: "rgba(21, 25, 82,0.6)",
              },
              {
                offset: 0,
                color: "rgba(251, 154, 68, 0.8)",
              },
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 1,
                color: "rgba(21, 25, 82,0.6)",
              },
              {
                offset: 0,
                color: "rgba(229, 76, 50,0.8)",
              },
            ]),
          ],
          legend: {
            // type: 'circle',
            data: name,
            top: 25,
            left: 109,
            itemWidth: 14,
            itemHeight: 14,
            textStyle: {
              color: "rgba(79, 166, 247, 1)",
              fontSize: 12,
            },
            // align: 'center'
          },
          tooltip: {
            trigger: "axis",
            backgroundColor: "#040737",
            borderColor: "#0E8BFF", // 设置边框颜色，这里是绿色
            borderWidth: 2, // 设置边框宽度，这里是2像素
            textStyle: {
              // 设置文本样式
              color: "#ffffff", // 设置文本颜色
              fontSize: 16, // 设置文本字体大小
            },
            axisPointer: {
              // 禁用轴线
              type: "none",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
            splitLine: {
              lineStyle: {
                color: "#1A2E8E", // 修改柱形图中间竖线颜色
              },
            },
          },
          xAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#4FA6F7", // X轴颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true, // 显示X轴网格线
              lineStyle: {
                color: "#4FA6F7", // X轴竖线颜色
              },
            },
            axisLabel: {
              show: true,
              color: "#4FA6F7",
              fontSize: 14,
            },
          },
          yAxis: {
            type: "category",
            data: ["男性", "女性"],
            axisLine: {
              lineStyle: {
                color: "#4FA6F7", // Y轴颜色
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              color: "#4FA6F7",
              fontSize: 14,
            },
          },
          series: arr1,
        };
        chart1.setOption(option1);
      })
    },
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  // watch: {
  //   isFullscreen: {
  //     handler(newValue, oldValue) {
  //       if (newValue == true) {
  //         this.height = "320px";
  //       } else {
  //         this.height = "300px";
  //       }
  //     },
  //   },
  // },
  mounted() {
    this.renderChart();
  },
};
</script>
<style scoped lang="scss">
.container {
  //height: 300px;
  padding: 10px 20px;
  //background: #06073B;
  border-radius: 7px;
  box-shadow: rgb(8, 79, 160) 0px 0px 40px inset;
  border: 2px solid rgb(8, 79, 160);
  background-color: transparent;
  .title_container {
    display: flex;
    align-items: center;
    .title {
      width: 13px;
      height: 27px;
      background: #1cdbfe;
      border-radius: 6px;
      display: inline-block;
    }
  }
}
</style>
